<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
<header th:replace="common/top"></header>
<div id="msg">已成功加入购物车！</div>
<div id="Content">
<div id="BackLink">
    <a th:href="@{/category/viewProduct?productId=}+${product.productId}" th:text="'Return to'+ ${product.productId}">返回上一层</a>
</div>
<div id="Catalog">

    <table>
        <tr>
            <img th:src="${product.descriptionImage}">
            <label th:text="${product.descriptionText}"></label>
        </tr>
        <tr>
            <td><b th:text="${item.itemId}"> item.itemId </b></td>
        </tr>
        <tr>
            <td>
                <b>
                    <font size="4" th:text="${item.attribute1}">
<!--                        ${sessionScope.item.attribute1}-->
<!--                        ${sessionScope.item.attribute2}-->
<!--                        ${sessionScope.item.attribute3}-->
<!--                        ${sessionScope.item.attribute4}-->
<!--                        ${sessionScope.item.attribute5}-->
<!--                        ${sessionScope.product.name}-->
                        商品属性
                    </font>
                </b>
            </td>
        </tr>
        <tr>
            <td th:text="${product.name}">product.name</td>
        </tr>
        <tr>
            <td>
<!--                <label th:if="${item.quantity <= 0}">Back ordered.</label>-->
<!--                <label th:if="${item.quantity > 0}" th:text="${item.quantity}+'in stock.'">Quantity in stock.</label>-->
                <label th:if="${item.quantity <= 0}">Shortage of goods</label>
                <label th:if="${item.quantity > 0}" th:text="${item.quantity}+'  Quantity int stock'">Quantity in stock.</label>
            </td>
        </tr>
        <tr>
            <td th:text="'$'+${#numbers.formatDecimal(item.listPrice,1,2)}">listPrice</td>
        </tr>

        <tr>
            <td th:if="${item.quantity > 0}">
                <a th:href="@{/cart/addItemToCart?workingItemId=}+${item.itemId}">Add to Cart</a>
            </td>
            <td th:if="${item.quantity <= 0}" style="text-align: center">
                <font color="#808080">缺货中</font>
            </td>
        </tr>
    </table>

</div>
</div>
<footer th:replace="common/bottom"></footer>


</body>
</html>
<script>
    $(function() {
        var offset = $("#end").offset();
        $(".addcar").click(function(event){
            var addcar = $(this);
            var img = addcar.parent().find('img').attr('src');
            var flyer = $('<img class="u-flyer" src="'+img+'">');
            flyer.fly({
                start: {
                    left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed
                    top: event.pageY //开始位置（必填）
                },
                end: {
                    left: offset.left+10, //结束位置（必填）
                    top: offset.top+10, //结束位置（必填）
                    width: 0, //结束时宽度
                    height: 0 //结束时高度
                },
                onEnd: function(){ //结束回调
                    $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息
                    addcar.css("cursor","default").removeClass('orange').unbind('click');
                    this.destory(); //移除dom
                }
            });
        });
    });
</script>
<style>
    #msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
</style>
